<script setup>
import { ref, defineProps,reactive } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import { reqQrGetone } from '@/api'
import labels from '@/components/app/label.vue'
import { toRaw } from '@vue/reactivity'
const isShow = ref(true)
const props = defineProps({
	drawer: Boolean
})
const emits = defineEmits(['changeDrawer'])
const showDetail = (id)=>{
	setTimeout(()=>{
		isShow.value = false
		setTimeout(() => {
			detail1.value.show(id)
		}, 5);
	},5)
}
const details = ref(null)
const drawerdata = reactive({
	add_count: '',
	all_count: '',
	avatar: '',
	customer: [],
	name: '',
	id: ''
})
const showStaffDetail = (id)=>{
	console.log(id)
	userBatchDetails({ staffid: id }).then((res) => {
		drawerdata.add_count = res.data.add_count
		drawerdata.all_count = res.data.all_count
		drawerdata.avatar = res.data.avatar
		drawerdata.customer = res.data.customer
		drawerdata.name = res.data.name
		drawerdata.id = res.data.id
	})
	isShow.value = false
}

const TestRef1 = ref(null)
const drawerSize = ref('70%')
const fullScreen = () => {
	// if (drawerSize.value === '100%') {
	// 	drawerSize.value = '70%'
	// } else {
	// 	drawerSize.value = '100%'
	// }
}
const chatId = ref('')
const form = ref({})
const show = async(chat_id) =>{
  console.log(chat_id,'asdasdasd')
	chatId.value = chat_id
	getData()
}
const chart = ref(null)
const table = ref(null)
const getData = async()=>{
	isShow.value = true
	const r = await reqQrGetone(chatId.value)
	if (r) {
		form.value = r.data
	}
	
}
const download = (val) =>{
  window.open(val)
}
const closeDrawer = () => {
	emits('changeDrawer', false)
}
defineExpose({
	show
})
</script>
<template>
	<div class="drawer">
		<el-drawer :size="drawerSize" v-model="props.drawer" :with-header="false" @close="closeDrawer">
    	<div class="draw-header app-container app-flex-2" style="border-bottom:1px solid #ececec">
					<div style="font-size:18px;font-weight:600">活码详情</div>
					<div class="icon-group app-flex-left" >
						<el-tooltip effect="dark" placement="bottom">
							<template #content>
								<p class="box-item">{{ drawerSize === '70%' ? '全屏模式' : '退出全屏' }}</p>
							</template>
							<MyIcon
								@click="fullScreen"
								v-if="drawerSize === '70%'"
								class="icon-item"
								style="font-size: 12px;margin-right:14px"
								name="Fullscreen"
							/>
							<MyIcon @click="fullScreen" v-else class="icon-item" name="fullscreenExit" />
						</el-tooltip>

						<el-icon @click="closeDrawer" class="icon-item"><Close /></el-icon>
					</div>
				</div>
				<div class="draw-main app-container">
			<div class="title" style="font-size:16px">二维码信息</div>
       <el-form  style="margin-top:14px" label-width="120px" align="right">
      <el-form-item label="二维码名称：">
        {{form.name}}
      </el-form-item>
      <el-form-item label="二维码预览：">
      <div>
      <el-image style="width:140px;height:140px" :src="form.qr_code" />
      <el-button @click="download(form.qr_code)" size="large" style="margin-left:20px;margin-top:-30px">下载</el-button>
      </div>
      </el-form-item>
      </el-form>

      	<div class="title app-gap-block-top" style="font-size:16px">基础信息</div>
       <el-form  style="margin-top:14px" label-width="120px" align="right">
      <el-form-item label="上线成员：">
        <div class="app-words-box" v-for="(item,index) in form.staffName" :key="index">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span v-if="item.name" class="app-gap-words-left-xs">{{ item.name }}</span>
										</div>
									</div>
      </el-form-item>
       <el-form-item label="创建时间：">
        {{form.create_time}}
      </el-form-item>
        <el-form-item label="员工添加上限：">
        {{form.staffup_status==1?'开启':'关闭'}}
				 <el-table
				 v-if="form.staffup_status==1"
          :data="	form.staffup_data"
        >
          <el-table-column label="员工" props="name">
							<template #default="scope">
							<span class="app-flex-left">
										<el-avatar class="cho-margin" shape="square" :size="30" :src="scope.row.avatar" />
										<span class="app-gap-words-left">{{ scope.row.name }}</span>
									</span>
					</template>
          </el-table-column>
          <el-table-column label="员工添加上限(人)" prop="sx">
           
          </el-table-column>
         
        </el-table>
			

      </el-form-item>
      <el-form-item label="备用成员：">
        <div class="app-words-box" v-for="(item,index) in form.staff_standby_name" :key="index">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span v-if="item.name" class="app-gap-words-left-xs">{{ item.name }}</span>
										</div>
									</div>

      </el-form-item>


      </el-form>


      	<div class="title app-gap-block-top" style="font-size:16px">功能设置</div>
       <el-form  style="margin-top:14px" label-width="120px" align="right">
      <el-form-item label="自动通过好友：">
        {{form.skipverify_status==1?'已开启':'未开启'}}
      </el-form-item>
       <el-form-item label="开启时间：">
        {{form.skipverify_type==1?'全天在线':'分时段'}}
        {{ form.skipverify_type==2?form.skipverify_time[0]+'-'+form.skipverify_time[1]:'' }}
      </el-form-item>
      </el-form>


				</div>

    

      

		</el-drawer>
	</div>
</template>
<style lang="scss" scoped>
@import url('../../../../style/app-component.scss');
:deep(.el-card) {
	border: 0;
	border-radius: 0;
}
.text {
	font-size: 14px;
	color: #000000a6;
}
.flex-center {
	display: flex;
	align-items: center;
}
:deep(.el-drawer) {
	--el-drawer-padding-primary: 0px;
}
.box-item {
	font-size: 14px;
}
.draw-container {
	position: relative;
	width: 100%;
	min-height: 100vh;

	background-color: #f4f5f7;
	.draw-main {
		padding: 16px;
		.draw-main-gruop {
			display: flex;
			justify-content: space-between;
			width: 100%;
			.box-card {
				width: 392px;
				height: auto;
				.card-header {
					width: 100%;
					justify-content: space-between;
					display: flex;
					align-items: center;
					.group-refresh {
						font-size: 13px;
						color: #666;
						cursor: pointer;
						.icon-refresh {
							margin-right: 3px;
							transform: rotateY(150deg);
						}
					}
				}
			}
			.main-grop-left {
				width: 63.5%;
				padding: 24px;
				background-color: #fff;
				.main-grop-left-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.group-img {
						display: flex;
						.header-btn {
						}
						.group-info {
							margin-left: 16px;
							font-size: 16px;
							color: #333;
							img {
								width: 18px;
								height: 18px;
								margin-right: 2px;
							}
						}
						img {
							width: 64px;
							height: 64px;
						}
					}
				}
			}
		}
	}
	.draw-header {
		// position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 22px 16px 22px 32px;
		background-color: #fff;
		box-shadow: 0 1px 4px 0 rgb(0 0 0 / 6%);
		.title {
			height: 24px;
			line-height: 24px;
			color: #262626;
			font-weight: 700;
			font-size: 16px;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.icon-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 52px;
			height: 20px;

			.icon-item {
				cursor: pointer;
				color: #000000a6;
			}
			.icon-item:hover {
				color: #8c8c8c;
			}
		}
	}
}
.app-card-item{
	width:120px !important;
}
.app-card-desc{
	display: flex;
	align-items: center;
}
.title {
	font-weight: 600;
	font-size: 13px;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	border-left: 3px solid #1990ff;
	padding-left: 7px;
}
</style>
